<template>
<div id="app">
    
          <div id="app" class="group"  style="width:720px;" >
                     <text>sdaojdaj</text>
                      <div class="group" style="padding-left:60px;" >
                          <text class="button"  style="width:200px;font-size:30px; " @click="pickControlLevel">{{controlLevelName}}</text>
                      </div>

                      <div class="group"  >
                          <text class="button"  style="width:200px; font-size:30px;" @click="pickRegion">{{regionName}}</text>
                      </div>

                      <div class="group"  >
                          <text class="button"  style="width:200px; font-size:30px;" @click="pickNature">{{natureName}}</text>
                      </div>

                      <div class="group"  >
                          <text class="button"  style="width:160px; font-size:30px;"  @click="research">查询</text>
                      </div>
        </div>
            <div style="height:5px;width:720px;  background-color:rgb(48,48,48);"> </div>
            <list class="list">
                        <cell class="cell" v-for="station in items.data"   @click="onSelected(station)">
                        <station :station="station" ></station>
                        </cell>
              </list>

</div>

</template>


<style scoped>

  .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .station {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
  .group {
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
  }
</style>
<script> 
    import station from './station.vue'
    var modal = weex.requireModule('modal')
    var stream = weex.requireModule('stream')
    var config = require('./config.js')
    var picker = weex.requireModule('picker')
     var navigator = weex.requireModule('navigator')
     var storage = weex.requireModule('storage')



    
    export default {
        el:'#app', 
        components: { station },
        data () {
          return { 
              controlLevelCodes:['1','2','3','4','6','9'],  
              regionCodes:['67','68','71','66','64','72','70','73'],
              natureCodes:['wsclc','dqhj'],
              selected:'',
          station:{
          },
            controlLevelName:"站点控制级别",
            regionName:"站点所属区域",
            natureName:"站点属性",

            items:{ },
            index:0,
            value:'',

            nature:"",
            controlLevel:"",
            region:"",
            companyName:"",
            username:"admin"
      }
    },
   

    methods: {
       getStationView (repo, callback) {
              return stream.fetch({
               method: 'POST',
               type: 'json',
               url: 'http://101.68.88.221:8781/jx/Mobile/' + repo,              
               body:config.toParams({
                        nature:this.nature,
                        controlLevel:this.controlLevel,
                        region:this.region,
                        username:this.username
      })
           }, callback)
        },
     
     research (event) {
         this.getStationView('querySite!getSitesByConditions.action', res => {
             if(res.ok){
                 var jsonData = JSON.stringify(res.data,null,4);
                 this.items = res.data;
           }else{
          modal.toast({ message: "查询异常"});
           }
      })
         
      },
         pickControlLevel: function () {
            var items = new Array("国控","省控","市控","县控","市直属","其他");
            var self = this;
            picker.pick({
                'items': items,
                'index': 0
            }, function (ret) {
                var result = ret.result;
                if (result == 'success') {
                    self.value = items[ret.data];
                    self.index = ret.data;
                    self.controlLevelName = items[ret.data];
                    self.controlLevel = self.controlLevelCodes[self.index];
                }
            });
        },
         pickRegion: function () {
            var items = new Array("柯城区","集聚区","常山县","衢江区","衢州本级","开化县","江山市","龙游县");
            var self = this;
            picker.pick({
                'items': items,
                'index': 0
            }, function (ret) {
                var result = ret.result;
                if (result == 'success') {
                    self.value = items[ret.data];
                    self.index = ret.data;
                    self.regionName = items[ret.data];
                    self.region = self.regionCodes[self.index];
                }
            });
        },
         pickNature: function () {
            var items = new Array("污水处理厂","大气环境");
            var self = this;
            picker.pick({
                'items': items,
                'index': 0
            }, function (ret) {
                var result = ret.result;
                if (result == 'success') {
                    self.value = items[ret.data];
                    self.index = ret.data;
                    self.natureName = items[ret.data];
                    self.nature = self.natureCodes[self.index];
                }
            });
        },

         onSelected:function(station){
               storage.setItem('siteId', station.siteId, event => {
              });
               storage.setItem('nature', "wsclc", event => {
              });
                navigator.push({
                name:'Detail',
                url: 'http://192.168.43.55:8081/stationInfo.weex.js',
                params:{
                      station:station
                }
         }, event => {
        })
            }
    }
  };

</script>
